<!-- 开门记录查询 -->
<template>
	<view class="no-warpper">
		<view class="nl-shadow-box">
			<view class="nl-flex-title">
				<text>查询条件 (非必填)</text>
				<view class="reset" @click="onReset()">重置</view>
			</view>

			<view class="nl-flex-list" @click="changeDate('fromTime')">
				<text class="nl-margin-right">起始时间</text>
				<view :class="pamras.fromTime ? 'right':'right-grey'">
					{{pamras.fromTime ? pamras.fromTime : '选择起始时间'}}
				</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>
			<view class="nl-flex-list" @click="changeDate('toTime')">
				<text class="nl-margin-right">结束时间</text>
				<view :class="pamras.toTime ? 'right':'right-grey'">{{pamras.toTime ? pamras.toTime : '选择结束时间'}}
				</view>
				<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
			</view>

			<view class="nl-flex-list">
				<text class="nl-margin-right">位置</text>
				<u-input class="input" v-model="pamras.position" type="text" placeholder="输入位置" />
			</view>

			<view class="button-lg" @click="query()">
				<button>查询</button>
			</view>
		</view>
		
		
		<u-picker mode="time" v-model="dateShow" :params="dateParams" @confirm="dateConfirm"></u-picker>
	</view>
</template>

<script>
	import goToUrl from '@/common/goToUrl.js'
	import { getByType } from '@/api/fee'
	
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				
				pamras: {
					fromTime: '', // 查询起始时间
					toTime: '', // 查询结束时间
					position: '', // 位置
				},
				
				changeDateKey: '',
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				dateShow: false,
				startTimeStamp: 0, // 起始时间戳
				endTimeStamp: 0, // 结束时间戳
			}
		},
		onShow() {
		},
		onLoad(option) {
		},
		computed: {
			...mapState('user', ['userCommunity'])
		},
		methods: {
			/**
			 * 选择时间
			 */
			changeDate(key) {
				let self = this
				self.dateShow = true
				self.changeDateKey = key
			},
			/**
			 * 选择时间确认
			 */
			dateConfirm(val) {
				let self = this
				let time = `${val.year}-${val.month}-${val.day} ${val.hour}:${val.minute}:${val.second}`
				if (self.changeDateKey == 'fromTime') {
					self.startTimeStamp = (new Date(time)).getTime() / 1000
					if (self.endTimeStamp != 0 && self.startTimeStamp > self.endTimeStamp) {
						uni.showToast({
							title: '起始时间不能大于结束时间',
							icon: 'none',
							duration: 2000
						})
						return false
					}
					self.pamras.fromTime = time

				} else {
					self.endTimeStamp = (new Date(time)).getTime() / 1000
					if (self.endTimeStamp < self.startTimeStamp) {
						uni.showToast({
							title: '结束时间不能小于起始时间',
							icon: 'none',
							duration: 2000
						})
						return false
					}
					self.pamras.toTime = time
				}
			},
			/**
			 * 重置
			 */
			onReset(){
				
				this.pamras = {
					fromTime: '', // 查询起始时间
					toTime: '', // 查询结束时间
					position: '' // 位置
				}
			},
			/**
			 * 查询
			 */
			query(){
				let pamras = JSON.stringify(this.pamras)
				goToUrl(`/pages/home/treasureQuery/openDoor/openDoor?pamras=${pamras}`)
			}
		}
	}
</script>

<style lang="scss">
	.nl-flex-title{
		position: relative;
	}
	.reset{
		color: $uni-color-primary;
		position: absolute;
		padding: 24rpx;
		right:0
	}
	.reset:active{
		background-color: #f9f9f9;
	}
</style>
